<template>
	<view class="livedata">
		<view class="header">
			<!-- 头部 -->
			<Header :name="message" />
		</view>
		<view class="body">
			
			<view class="table1">
				<uni-table border stripe=false emptyText="暂无更多数据">
					<!-- 表头 -->
					<uni-tr>
						<uni-th width="50rpx" align="center">序号</uni-th>
						<uni-th width="50rpx" align="center">名称</uni-th>
						<uni-th width="50rpx" align="center">数值</uni-th>
						<uni-th width="50rpx" align="center">单位</uni-th>
					</uni-tr>
					<!-- 表数据 -->
					<uni-tr v-for="(item, index) in tableData" :key="index">
						<uni-td align="center">{{ item.id }}</uni-td>
						<uni-td align="center">{{ item.name }}</uni-td>
						<uni-td align="center">{{ item.value }}</uni-td>
						<uni-td align="center">{{ item.unit }}</uni-td>

					</uni-tr>
				</uni-table>
			</view>
		</view>
	</view>
</template>

<script>
	import Header from '../component/Header.vue'
	export default {
		components: {
			Header
		},
		data() {
			return {
				message: '',
				tableData: [{
						id: 1,
						name: 'Ua1',
						value: '0.01',
						unit: 'V'
					},
					{
						id: 2,
						name: 'Ub1',
						value: '0.02',
						unit: 'V'
					},
					{
						id: 3,
						name: 'Uc1',
						value: '0.03',
						unit: 'V'
					}, {
						id: 3,
						name: 'Uc1',
						value: '0.03',
						unit: 'V'
					}, {
						id: 3,
						name: 'Uc1',
						value: '0.03',
						unit: 'V'
					}, {
						id: 3,
						name: 'Uc1',
						value: '0.03',
						unit: 'V'
					}, {
						id: 3,
						name: 'Uc1',
						value: '0.03',
						unit: 'V'
					}, {
						id: 3,
						name: 'Uc1',
						value: '0.03',
						unit: 'V'
					}, {
						id: 3,
						name: 'Uc1',
						value: '0.03',
						unit: 'V'
					}, {
						id: 3,
						name: 'Uc1',
						value: '0.03',
						unit: 'V'
					}, {
						id: 3,
						name: 'Uc1',
						value: '0.03',
						unit: 'V'
					}, {
						id: 3,
						name: 'Uc1',
						value: '0.03',
						unit: 'V'
					}, {
						id: 3,
						name: 'Uc1',
						value: '0.03',
						unit: 'V'
					}, {
						id: 3,
						name: 'Uc1',
						value: '0.03',
						unit: 'V'
					}, {
						id: 3,
						name: 'Uc1',
						value: '0.03',
						unit: 'V'
					}, {
						id: 3,
						name: 'Uc1',
						value: '0.03',
						unit: 'V'
					}, {
						id: 3,
						name: 'Uc1',
						value: '0.03',
						unit: 'V'
					}, {
						id: 3,
						name: 'Uc1',
						value: '0.03',
						unit: 'V'
					}, {
						id: 3,
						name: 'Uc1',
						value: '0.03',
						unit: 'V'
					}, {
						id: 3,
						name: 'Uc1',
						value: '0.03',
						unit: 'V'
					},
					// ... 其他数据
				],
			};
		},
		onLoad(props) {
			console.log(props);
			this.message = props.name
		}
	}
</script>

<style lang="scss">
	* {
		margin: 0;
		padding: 0;
	}

	.livedata {
		// background-color: red;

		.header {}

		.body {
			min-height: 42vh;
			// background-color: red;
			padding-top: 100rpx;
// 表格样式
			.table1 {
				border: 4rpx solid #e7923b;
				margin: 0 auto;
				width: 80%;
				max-height: 42vh;
				overflow-y: scroll;
				overflow-x: hidden;
				// 单元格样式
				/deep/ .uni-table-td,
				/deep/ .uni-table-th{
					font-size: 24rpx;
					padding: 5rpx 5rpx;
					border-right:1px solid rgba(0, 0, 0, .5);
					border-bottom:2px solid #e7923b;
					line-height: normal;
				}
				// 去除最后一列右边边框
				/deep/ .uni-table-td:last-child,
				/deep/ .uni-table-th:last-child{
					border-right: none;
				}
				// 2n行单元格背景样式
				/deep/ .uni-table-tr:nth-child(2n){
					background-color: #f2f2f2;
				}
				
				// /deep/ .uni-table-tr{
				// 	border: 5px solid red;
				// }
				/* 移除最后一行的底部边框 */
				/deep/ .uni-table-tr:last-child .uni-table-td{
					border-bottom: none;
					
				}
			}
			
		}

	}
</style>